@import "index.less";
.Top_position {
  .mainsVw {
    background: url(../images/serviceScope_01.png) no-repeat center center /
      cover;
  }
}
#serviceScope {
  .container {
    .serviceScopeList {
      .serviceScopeItem {
        display: flex;
        background: #f0f0f0;
        margin-bottom: 30px;
        .left {
          width: 50%;
          .img {
            width: 100%;
            overflow: hidden;
            transition: all 0.5s;
            img {
              transition: all 1.5s;
            }
          }
          &:hover {
            .img {
              img {
                transform: scale(1.1);
              }
            }
          }
        }
        .right {
          width: 50%;
        //   @flex_c_c();
          .target {
            width: 70%;
            margin: 0 auto;
            margin-top: 30px;
            h2 {
              margin-bottom: 15px;
              color: @color;
              /* 超出限定行数省略号 */
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .text {
              color: #666666;
              line-height: 25px;
              margin-bottom: 37px;
              /* 超出限定行数省略号 */
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .itemBtnList {
                @flex_s_b();
                flex-wrap: wrap;
              .itemBtn {
                width: 170px;
                height: 40px;
                @flex_c_c();
                border: 2px solid #696869;
                border-radius: 20px;
                font-size: 15px;
                color: #2d2a2f;
                margin-bottom: 20px;
                cursor: pointer;
               
                &:hover,
                &.active {
                  background-color: @btnColor;
                  a{
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
    #serviceScope {
      .container {
        .serviceScopeList {
          .serviceScopeItem {
            flex-wrap: wrap;
            .right {
              .target{
                width: 90%;
              }
            }
          }
        }
      }
    }
  }
@media screen and (max-width: 750px) {
  #serviceScope {
    .container {
      .serviceScopeList {
        .serviceScopeItem {
          flex-wrap: wrap;
          .left,
          .right {
            width: 100%;
          }
          .right {
            .target{
                .itemBtnList{
                    .itemBtn{
                        width: 47%;
                        height: 30px;
                        font-size: 12px;
                    }
                }
            }
          }
        }
      }
    }
  }
}
